<template>
  <div id='temp'>
    <div class="head">
      <h3>新建课程</h3>
    </div>
    <div class="form">
      <el-form ref="form" :model="form" :rules="rules"  label-width="180px">
        <el-row>
          <el-col :span="12">
            <div>
                <el-form-item label="课程编码" prop="code">
                  <el-input v-model="form.code" @blur="codeBlur"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="课程分级" prop="rank">
                  <el-select v-model="form.rank" clearable filterable>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="课程地点" prop="place">
                  <el-select v-model="form.place" clearable filterable>
                    <el-option label="课程" value="课程"></el-option>
                    <el-option label="研讨会" value="研讨会"></el-option>
                    <el-option label="办公室培训" value="办公室培训"></el-option>
                    <el-option label="船上培训" value="船上培训"></el-option>
                    <el-option label="异地培训" value="异地培训"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="课程类型" prop="type">
                  <el-select v-model="form.type" clearable filterable>
                    <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="课程授权方" prop="authorization">
                  <el-select v-model="form.authorization" clearable filterable>
                    <el-option v-for="item in authorizationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="最小开班人数" prop="minnum">
                  <el-input v-model="form.minnum"></el-input>
                </el-form-item>
                <el-form-item label="最大开班人数" prop="maxnum">
                  <el-input v-model="form.maxnum"></el-input>
                </el-form-item>
                <el-form-item label="标准开班人数" prop="standardnum">
                  <el-input v-model="form.standardnum"></el-input>
                </el-form-item>
                <el-form-item label="反馈" prop="feedback">
                  <el-radio-group v-model="form.feedback">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="课前考试评估" prop="pre_test">
                  <el-radio-group v-model="form.pre_test">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="课后考试评估" prop="after_test">
                  <el-radio-group v-model="form.after_test">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="证书有效期" prop="certificate_time">
                  <el-input v-model="form.certificate_time" placeholder="单位(月)"></el-input>
                </el-form-item>


            </div>
          </el-col>
          <el-col :span="12">
            <div>
                <el-form-item label="文件上传">
                  <el-upload class="avatar-uploader my-uploader" :action="action"
                             :show-file-list="false" :on-progress = "handleAvatarUpload" :on-success="handleAvatarSuccess">
                    <img v-if="form.img" :src="form.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="课程开发日期" prop="startdate">
                  <el-date-picker v-model="form.startdate" type="date" ></el-date-picker>
                </el-form-item>
                <el-form-item label="新课程到期" prop="enddate">
                  <el-date-picker v-model="form.enddate" type="date" ></el-date-picker>
                </el-form-item>
                <el-form-item label="课程成本" prop="cost">
                  <el-input v-model="form.cost"></el-input>
                </el-form-item>
                <el-form-item label="课程天数" prop="days">
                  <el-input v-model="form.days"></el-input>
                </el-form-item>
                <el-form-item label="收费标准" prop="standardfee">
                  <el-input v-model="form.standardfee"></el-input>
                </el-form-item>
                <el-form-item label="积分兑换比例" prop="integral">
                  <el-input v-model="form.integral"></el-input>
                </el-form-item>
                <el-form-item label="是否是用模拟器" prop="simulator">
                  <el-radio-group v-model="form.simulator">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="IMO示范课程" prop="imo">
                  <el-radio-group v-model="form.imo">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="课前考试评估合格分数" prop="pre_test_score" v-if="form.pre_test == '是'">
                  <el-input v-model="form.pre_test_score"></el-input>
                </el-form-item>
                <el-form-item label="课后考试评估合格分数" prop="after_test_score"  v-if="form.after_test == '是'">
                  <el-input v-model="form.after_test_score"></el-input>
                </el-form-item>
            </div>
          </el-col>
        </el-row>
        <div class="submit">
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //表单数据
        form: {
          code: '',
          name: '',
          rank: '',
          place: '',
          type: '',
          authorization: '',
          minnum: '',
          maxnum: '',
          standardnum: '',
          feedback: '',
          pre_test: '',
          after_test: '',
          certificate_time: '',
          startdate: '',
          enddate: '',
          cost: '',
          days: '',
          standardfee: '',
          integral: '',
          simulator: '',
          imo: '',
          pre_test_score: '',
          after_test_score: '',
          img: ''
        },
        //表单验证规则
        rules: {
          code: [
            { required: true, message: '请输入课程编码', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入课程名称', trigger: 'blur' },
          ]
        },
        courseList: [],
        authorizationList: [],
        action: PATH + 'Train/courseAdd',
        //图片上传地址
        imageUrl: ''
      }
    },
    methods: {
      getCourseTypeList(){
        this.apiPost('System/courseTypeLists').then(res=>{
          this.courseList = res
        })
      },
      getCourseAuthorizationList(){
        this.apiPost('System/courseAuthorizationLists').then(res=>{
          this.authorizationList = res
        })
      },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.form.pre_test != '是'){
              this.form.pre_test_score = 0
            }
            if(this.form.after_test != '是'){
              this.form.after_test_score = 0
            }
            this.apiPost('Train/courseAdd', this.form).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                router.push('/course/detail/'+res.id)
              }
            })
          } else {
            return false;
          }
        });
      },
      handleAvatarUpload(){
        _g.openGlobalLoading()
      },
      handleAvatarSuccess(res){
        _g.closeGlobalLoading()
//        let remind = res.error?'error': 'success'
//        _g.toastMsg(remind, res.msg)
        if(!res.error){
          this.form.img = res.url
        }else{
          _g.toastMsg('error', '图片上传失败')
        }
      },
      codeBlur(){
        if(this.form.code){
          let data = {
            code: this.form.code
          }
          this.apiPost('system/checkCourseCode', data).then(res=>{
            if(res){
              this.$alert('是否跳转到该课程详情', '课程编号已存在', {
                confirmButtonText: '确定',
                callback: action => {
                  router.push('/course/detail/'+res)
                }
              });
            }
          })
        }
      }
    },
    created(){
      this.getCourseTypeList()
      this.getCourseAuthorizationList()
    }
  }
</script>
<style lang="css" scoped>
  #temp {
    padding-bottom: 50px;
  }

  .head {
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #333;
    margin-bottom: 10px;
  }

  .head h3 {
    font-weight: 900;
  }

  .form .el-row{
    max-width: 800px;
    margin: 0 auto;
  }

  .submit {
    text-align: center;
    margin-top: 30px;
  }

  .form .el-input, .el-input__inner, .form .el-date-editor .el-input .el-date-editor--date, .form .el-select {
    width: 188px;
  }

  .form .el-form-item {
    margin-bottom: 18px;
  }
  .my-uploader img, .my-uploader i{
    width: 128px;
    height: 128px;
    line-height: 128px;
  }
</style>
